<template>
  <view class="content">
    <view class="content-top" />
    <eui-list-template
        type="list"
        v-model="dataList"
        :isApprove="false"
        :isImage="true"
        :isBottem="true"
        :refresher="true"
        :option="elistOption"
        :sysConfig="sysConfig"
    >
    </eui-list-template>
  </view>
</template>


<script>
export default {
  data() {
    return {
      displayable: false,
      dataList: [
        {
          c_id: 'c1010101010',
          c_count_dt: '2022-11-26 00:00:00',
          c_n_l: '102',
          c_n: '101',
          c_n_p: '39',
          c_status: '0', // 0-尚未审核、2预审核，3-已审核、5已生效， 6已结束、7-已终止、8-已完成、9-已作废
          c_approve_status: '1',
          c_count_userno: '0382',
          c_count_userno2: '0401',
          c_progress: '1', // 0-尚未开始、1-初盘、2-复盘、3-三盘、4-预审、5-确认、6-完成
        },
      ],
      /* */
      // 系统参数，字典
      sysConfig: {
        c_progress: {}, // 盘点进度
        c_status: {}, // 单据状态
      },
      elistOption: {
        items: [
          {
            className: 'custom-id',
            type: 'id',
            valueCustomId: 'c_id',
            valueCustomDt: 'c_count_dt',
          },
          {
            type: 'status',
            progressValue: 'c_progress',
            approveStatus: 'c_approve_status',
            isApprove: false,
          },
          {
            modelValue: 'c_total_item_count',
            type: 'number',
            label: '商品品项数:',
          },
          {
            modelValue: 'c_n_p',
            type: 'number',
            label: '盘盈数量:',
          },
          {
            modelValue: 'c_n_l',
            type: 'number',
            label: '盘亏数量:',
          },
        ]
      },
    };
  },
  methods: {
    // 列表点击事件
    listItemClick(item) {
      console.log('listItemClick', item);
    },
    // 下拉刷新
    listPullDown() {
      console.log('listPullDown');
    },
    // 上拉加载
    listPullUp() {
      console.log('listPullUp');
    },
    // 查询条件确认
    confirm() {
      console.log('confirm');
    },
    // 查询条件确认
    searchConfirm() {
      console.log('searchConfirm');
    },
    // 点击右侧按钮
    clickRight(key) {
      console.log('clickRight', key);
    },
    getData() {
      console.log('getData');
    },
    templateClick() {
      console.log('templateClick');
    },
  },
}
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "ListTemplate"
  }
}
</route>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "ListTemplate"
  }
}
</route>

<style lang="scss" scoped>

.content {
  background-color: #F4F4F4;
  display: flex;
  padding: 0;
  width: 100%;
  height: 1000px;
  flex-direction: column;
}

.content-top {
  width: 100%;
  margin-top: 30rpx;
}

.content-img {
  background-size: 100% 150rpx;
  background-repeat: no-repeat;
}

.navigation {
  flex: 2;
}

// start 重置标题栏右侧样式 展示当前用户所属门店
::v-deep .uni-navbar__header-btns-right {
  position: relative;
  height: 100%;
}

::v-deep .uni-nav-bar-right-text {
  position: absolute;
  top: 0;
  right: 0;
  color: #aaffff;
  text-align: center;
  max-width: 200rpx;
  margin-right: 30rpx;
  font-size: 0.8rem;
  padding-top: 0.1rem;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// end  重置标题栏右侧样式 展示当前用户所属门店

.footer {
  margin: 0;
  flex: 7;

  ::v-deep .m-list-template-list {
    //height: auto!important;
  }
}

// start 自定义更多按钮
// 复制 RdsNavBar
.custom-menu {
  border-top: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: flex-start;
}

.popup-icon-btn {
  display: flex;
  padding: 10px;
  margin: 5px;
  color: #333333;
  text-align: center;
  flex-direction: column;
}

.popup-icon-btn uni-icon {
  margin: 0 auto;
  background: #ffffff;
  border-radius: 50%;
  font-size: 1.2em;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
}

.popup-icon-btn uni-text {
  font-size: 0.8em;
  padding: 0.2em 0;
  line-height: 1.4em;
  width: 52px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// 业务自定义
.icon_new_count {
  color: #00aaff;
}

// end 自定义更多按钮

// start 查询筛选
.search-fields {
  width: 100%;

  .center {
    margin: 0 10px;
  }

  .search-field {
    margin: 5px 0;
    padding: 5px 0;
  }

  ::v-deep .m-card-input-content, ::v-deep .m-input-input {
    height: 100%;
    text-align: right !important;

    uni-view, * {
      margin: 0 !important;
    }
  }

  .bottom {
    background: #ffffff;
    margin: 5px 0px 0px;
    padding: 5px 0;
    border-top: 1px solid #cccccc;
  }
}

// end 查询筛选

// 列表项自定义
.custom-id {
  z-index: 1;
  position: relative;
  line-height: 1.2em;
}

.custom-id::before {
  position: absolute;
  z-index: 0;
  content: ' ';
  width: 2.5em;
  height: 1.2em;
  background: rgba(153, 255, 102, 0.2);
  top: 0;
  left: 0;
}

// end 列表项自定义

</style>
